<template>
    <div class="page">
        <AdminLayout
            :left-fixed="true"
            no-sel-message="请选择公司或部门再进行操作~"
            ref="adminLayout"
        >
            <template #left>
                <div style="height: 100%;" >
                    <SideTree
                        ref="sideTreeRef"
                        @searchAllData="searchAllData"
                        @selectTree="selectTree"
                        @SuccessfuCallbackFn="SuccessfuCallbackFn"
                        @handNameFn="handNameFn" 
                        @createFolder="parentChang" 
                        @handleTreeDelete="handleTreeDelete" 
                        @handleTreeMove="handleTreeMove" />
                </div> 
            </template>
    <main class="page admin-page page-container">
        <div class="page-title">
            <div class="left">
                <div class="name">罗凤鸣</div>
                <div class="routes">
                    共12个人物信息
                </div>
            </div>
            <div class="search-box">
                <a-input-search
                    width="460"
                    placeholder="请输入"
                    enter-button
                />
            </div>
        </div>
        
        <!-- main flex -->
        <div class="content-wrapper">
            <div class="character-wrapper">
                <div class="list-wrapper">
                    <ul class="character-list">
                        <li v-for="item in 100" :key="item" class="character-item">
                            <a href="javascript:;">
                                <img src="http://image.nbd.com.cn/uploads/articles/thumbnails/1573524/BZTAPHPEJV1715233060263.large_b.jpg">
                                <p>罗凤鸣</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 右侧边栏信息 -->
            <SideInfo />
        </div>
    </main>
</AdminLayout>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, h ,nextTick} from "vue";
import SideTree from "../MediaIndex/components/SideTree.vue";
import AdminLayout from "@/components/AdminLayout/AdminLayout.vue";
import SideInfo from "@/components/SideInfo/index.vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const sideTreeRef = ref();
// 选择全部数据
const searchAllData = ()=>{
    // changeCrumb({title:'全部'},0)
    // tabPosition.value ="all"
    // tabChangeTypeFn({target:{id:'0'}})
}

// 点击左侧栏目树
const selectTree = (selectedKeys: any, e: any) => {
    if (e.node.name == '全部标签') {
        router.push('/admin/mediaTag');
    } else if (e.node.name == '人物信息') {
        router.push('/admin/character');
    } 
    /*
    searchRef.value?.clearInput()
    // 如果不是文件夹tab，需要定位到全部
    if( tabPosition.value != 'folder'){
     tabPosition.value = 'all';
    }
    tabsTable.value[Number(currentTabIndex.value)].searchObj.lastId = "";
    tabsTable.value[Number(currentTabIndex.value)].searchObj["mainType"] = 0;
    breadCrumb.value = [{ title: "全部", file_id: null }];
    if (e.selected) {
        currentTypeId.value = {
            media_resource_id: e.node.id,
            ...e.node
        }
        useFileInfo.setDirectoryId( e.node.id);
        initDataFn({ media_resource_id: e.node.id })
        if (!e.parent) e.parent = e.node.parent
        const arrList = getBreadCrumbByTree(e, [])
        breadCrumb.value = breadCrumb.value.concat(arrList.reverse())
    } else {
        useFileInfo.setDirectoryId("0");
        initDataFn(1)
    }
    */
}


// 操作成功回调
const SuccessfuCallbackFn = () => {
    /*
    tabsTable.value[Number(currentTabIndex.value)].searchObj["lastId"] = '';
    state.checkedList = [];
    similarityFlag.value = false;
    (document.getElementById("admin-page") as any).scrollTop = 0;
    breadMoveCrumb.value = [{ title: "全部", file_id: null }];
    if (currentTypeId.value == "") {
        initDataFn(1);
    } else {
        // 有子目录状态1
        initDataFn(currentTypeId.value);
    }
    */
};

const handNameFn = (item: any) => {
    /*
    filterFlag.value = false;
    selectName.value = item.media_resource_id;
    selectItem.value = "";
    selectItemName.value = item.title;
    selectItemObj.value = item;
    dialogVisibleName.value = true;
    */
};

// 新建监听   isTreeAdd表示是否左侧树里面的新增
const parentChang = (res: string,newFileObj?:any) => {
    /*
    tabPosition.value = 'all';
    if (res == 'folder-success' && useFileInfo.directory_id == '0') {
        tabsTable.value[Number(currentTabIndex.value)].searchObj["lastId"] = "";
        initDataArr.value = [];
        initDataFn(1);
    } else {
        tabsTable.value[Number(currentTabIndex.value)].searchObj["lastId"] = "";
        initDataArr.value = [];
        initDataFn(currentTypeId.value);
    }
    filterFlag.value = false;
       // 新增完，更新左侧对应树
    if(newFileObj){
        refreshTreAdd(newFileObj)
    }
 */
};

// 设置树状选中高亮状态
const setSelectedKeys = (item?: any) => {
    sideTreeRef.value?.setSelectedKeys(item)
}
// 删除左侧树的时候，判断右侧面包屑和内容是否要更新
const handleTreeDelete = (item:any)=>{
    /*
    const _o = breadCrumb.value.find(v=>{
        return item.id == v.media_resource_id
    })
    if(_o){
        // 删除的文件面包屑中有的时候
        tabsTable.value[Number(currentTabIndex.value)].searchObj.lastId = "";
        breadCrumb.value = [{ title: "全部", file_id: null }];
        initDataFn(1)
    }else{
        //  过滤掉删除的数据
        initDataArr.value = initDataArr.value.filter(v=>{
        return v.media_resource_id !=item.id
        })
    }
    */
}
// 移动左侧树时候，，判断右侧面包屑和内容是否要更新
const handleTreeMove = async (item:any) => {
    /*
    const _o = breadCrumb.value.find(v=>{
        return item.id == v.media_resource_id
    })
    // 联动了
    if(_o){
        backStore.netdiskObj.currentTypeId = {media_resource_id:item.id}
        await backStore.setBreadCrumbById()
        breadCrumb.value = backStore.netdiskObj.breadCrumb;
        initDataFn(backStore.netdiskObj.currentTypeId);
    }else{
        //  过滤掉移动掉的数据
        initDataArr.value = initDataArr.value.filter(v=>{
        return v.media_resource_id !=item.id
        })
    }
    */
}

// 更新左侧树的重命名
const refreshTreeName = (item: any) => {
    sideTreeRef.value?.refreshTreeName(item)
}
// 更新左侧树的新增
const refreshTreAdd = (item: any) => {
    // sideTreeRef.value?.refreshTreAdd(item)
    resetTreeData()
}
// 更新左侧树的删除
const refreshDeleteData = (item: any) => {
    // sideTreeRef.value?.refreshDeleteData(item)
    resetTreeData()
}
// 更新左侧树的移动
const refreshTreeMoveData = (item: any) => {
    // sideTreeRef.value?.refreshTreeMoveData(item)
    resetTreeData()
}
// 一些批量操作的，触发左侧树全量更新，
const resetTreeData = () =>{
    sideTreeRef.value?.resetTreeData()
}
</script>

<style lang="scss" scoped src="../MediaIndex/Index.scss"></style>
<style lang="scss" scoped src="./index.scss"></style>